<template>
	<section v-loading="loading">
		<el-row>
  			<el-col :span="24"><div class="grid-content bg-purple">
  			<div class="baseInfo">
  			<span class="text">用户头像：</span><span class="atavr">
  				<img :src="image" alt="">
  			</span>
  			<span class="text">用户昵称：</span ><span class="text">{{username}}</span>
				
  			</div>
  			</div></el-col>
		</el-row>
		<el-row>
  			<el-col :span="24">
  			<div class="grid-content bg-purple">
					<el-menu mode="horizontal">
						<router-link to="/userbaseinfo"><el-menu-item index="1">基础信息</el-menu-item></router-link>
						<router-link to="/userappreciaterecord"> <el-menu-item index="2">鉴赏记录</el-menu-item></router-link>
						<router-link to="/userauctionrecord"><el-menu-item index="3">拍卖记录</el-menu-item></router-link>
						<router-link to="/userfinancerecord"><el-menu-item index="4">财务记录</el-menu-item></router-link>
					 </el-menu>
	  			</div>
  			</el-col>
		</el-row>
		<el-col :span="24" class="content-wrapper">
			<transition name="fade" mode="out-in">
				<router-view></router-view>
			</transition>
		</el-col>
	</section>
</template>
<script>
import { sendData, cutString } from "../../api/api";
export default {
  data() {
    return {
      username: "",
      image: "",
      loading:false
    };
  },
  methods: {
    getuserinfo() {
      let id = Number(sessionStorage.getItem("memberID"));
      if (id) {
        if (this.$route.params.id && id !== this.$route.params.id) {
          sessionStorage.setItem("memberID", this.$route.params.id);
          this.id = this.$route.params.id;
        } else {
          this.id = id;
        }
      } else {
        sessionStorage.setItem("memberID", this.$route.params.id);
        this.id = Number(sessionStorage.getItem("memberID"));
      }
      this.loading = true;
      let params = sendData({ url: "user/info", msg: { id: this.id } });
      this.$http.get(params.baseURL, { params: params.params }).then(res => {
        var res = cutString(res.bodyText);
        this.username = res.msg[0].username;
        this.image = res.msg[0].image;
        this.loading = false
        this.$router.push("/userbaseinfo");
      });
    }
 
  },
  mounted() {
    this.getuserinfo();
  }
};
</script>

<style scoped>
.el-row {
  margin: 20px 0px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
  min-height: 36px;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
}
.grid-content a{
  text-decoration: none;
  user-select: none;
}
.el-menu-item{
	font-size: 20px
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.baseInfo {
  margin-left: 200px;
  height: 60px;
}

.text {
  height: 10px;
  position: relative;
  top: -20px;
  font-size: 18px;
}
.atavr > img {
  width: 50px;
  height: 50px;
  border: 2px solid #494646;
  border-radius: 50%;
  display: inline-block;
  margin-right: 50px;
  margin-left: 10px;
  margin-top: 3px;
}
</style>